<template>
  <div>
      <header class="top">
          <span>
              <p><router-link tag="span"  to="day1">&lt</router-link></p>
              <p>我的</p>
          </span>
          <span></span>

      </header>

      <section class="tit">
          <div>

                <section><img src="../assets/blue.png" alt="">
             
                </section>
                   
                <section>
                    <h2>登录/注册</h2>
                    <p>登陆后享受更多特权</p>
                </section>
                <section>></section>

          </div>    
      </section>


      <section class="cen">
          <div>
              <img src="../assets/hong.png" alt="">
              <p>红包</p>
              
          </div>
          <div>
                <img src="../assets/hong.png" alt="">
              <p>金币</p>
          </div>

      </section>



      <section class="aslide">
           <p>
               <img src="../assets/din.png" alt=""><span>我的地址</span>
           </p>
           <p>></p>
      </section>



      
      <section class="aslide">
           <p>
               <img src="../assets/jin.png" alt=""><span>我的金币商城</span>
           </p>
           <p>></p>
      </section>




         
      <section class="aslide">
           <p>
               <img src="../assets/fen.png" alt=""><span>分享拿五元现金</span>
           </p>
           <p>></p>
      </section>





      <section class="aslide">
           <p>
               <img src="../assets/ke.png" alt=""><span>我的客服</span>
           </p>
           <p>></p>
      </section>





      <section class="aslide">
           <p>
               <img src="../assets/app.png" alt=""><span>下载了么APP</span>
           </p>
           <p>></p>
      </section>
  </div>
</template>
<script>
export default {
  

}
</script>
<style lang="less">
 .px2rem(@prop,@px) {
  @{prop}: @px /75 * 1rem;
}
.top{
    width: 100%;
    background:rgb(0,144,255);
   
    .px2rem(height,70);
     display: flex;
    justify-content: space-between;
    align-items: center;

    span{
        width: 45%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #fff;
        text-align: center;
        font-weight: bold;

    }
}
.tit{
    background: rgb(0,144,255);
    width: 100%;
    margin-top:9.5%;

    div{
        width: 95%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #fff;
       

      .px2rem(font-size,35)
       
       
    }
}
.cen{
    width: 100%;
     .px2rem(height,180);
      display: flex;
        
     div{
         width:50%;
         border-right:1px solid #ccc;
         text-align: center;
       padding-top:10%;
          
         
     }
}
.aslide{
    // border: 1px solid #ccc;
    width: 90%;
    margin: 0 auto;
    margin-top:2%;
    margin-bottom: 6%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .px2rem(height,50);
    .px2rem(font-size,35);

}
</style>
